﻿<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>工艺知晓率知识消消乐</title>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f8f9fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        /* 难度选择 */
        .difficulty-panel {
            margin: 20px;
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }
        .difficulty-btn {
            padding: 12px 25px;
            border-radius: 25px;
            border: 2px solid #4a90e2;
            background: white;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 16px;
            font-weight: 500;
            color: #4a90e2;
        }
        .difficulty-btn.active {
            background: #4a90e2;
            color: white;
            transform: scale(1.05);
        }

        /* 游戏面板 */
        #gameBoard {
            display: grid;
            gap: 20px;
            margin: 20px auto;
            padding: 20px;
            max-width: 1200px;
            width: 95%;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }

        /* 卡片样式 */
        .card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            cursor: pointer;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
            transition: all 0.3s;
            min-height: 120px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 18px;
            user-select: none;
            border: 2px solid transparent;
        }
        .card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        .selected {
            background: #e8f4ff;
            border-color: #4a90e2 !important;
            transform: scale(0.95);
        }
        .matched {
            opacity: 0.3;
            cursor: not-allowed;
            transform: scale(0.9);
        }

        /* 得分显示 */
        #score {
            font-size: 28px;
            color: #4a90e2;
            margin: 20px;
            font-weight: bold;
            text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        /* 游戏结束界面 */
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.9);
            display: none;
            justify-content: center;
            align-items: center;
            color: white;
            flex-direction: column;
            z-index: 1000;
            backdrop-filter: blur(5px);
        }
        .game-over-text {
            font-size: 48px;
            margin-bottom: 30px;
            text-align: center;
        }
        .restart-btn {
            padding: 18px 40px;
            font-size: 22px;
            background: #4a90e2;
            border: none;
            border-radius: 50px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        .restart-btn:hover {
            background: #357abd;
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <div class="difficulty-panel">
        <button class="difficulty-btn" data-level="1">信手拈来</button>
        <button class="difficulty-btn" data-level="2">小试牛刀</button>
        <button class="difficulty-btn" data-level="3">轻车熟路</button>
        <button class="difficulty-btn" data-level="4">得心应手</button>
        <button class="difficulty-btn" data-level="5">游刃有余</button>
    </div>
    <div id="gameBoard"></div>
    
    <div class="game-over" id="gameOver">
        <div class="game-over-text">游戏结束！最终得分：<span id="finalScore">0</span></div>
        <button class="restart-btn" onclick="restartGame()">重新挑战</button>
    </div>

    <script>
        // 游戏题库系统
        const questionBank = [
            { id: 1, q: "纵梁外观质量要求", a: "纵梁表面无明显折边拉痕，无磕碰，划伤、裂纹、无锈蚀，无油污以及其它缺陷", level: 5 ,checkkey:1},
            { id: 2, q: "纵梁加固板高出纵梁翼面要求", a: "≤3mm", level: 4 ,checkkey:2},
            { id: 3, q: "铆成头直径≥铆钉直径的几倍", a: "1.5", level: 1 ,checkkey:3},
            { id: 4, q: "铆成头外购质量要求", a: "有正确形状，无裂纹", level: 3 ,checkkey:4},
            { id: 5, q: "铆接零部件表面质量要求", a: "零件无裂纹、无划伤", level: 3 ,checkkey:5},
            { id: 6, q: "铆接零件的结合表面被铆零件间的贴合面在铆钉沿周几倍铆钉杆直径范围内必须紧密贴合", a: "3", level: 2 ,checkkey:6},
            { id: 7, q: "铆接零件和被铆零件必须紧密贴合，其间隙要求", a: "≤0.2mm", level: 2 ,checkkey:7},
            { id: 8, q: "单铆的铆接压力要求", a: "12~18MPa", level: 1 ,checkkey:8},
            { id: 9, q: "拼装的铆接压力要求", a: "18~24MPa", level: 1 ,checkkey:9},
            { id: 10, q: "铆焊车间共多少条生产线", a: "14", level: 2 ,checkkey:10},
            { id: 11, q: "铆焊车间共多少条焊接线", a: "4", level: 2 ,checkkey:11},
            { id: 12, q: "铆接质量要求", a: "铆钉无歪铆,错铆，漏铆现象", level: 4 ,checkkey:12},
            { id: 13, q: "铆接强度要求", a: "≥270Mpa", level: 5 ,checkkey:13},
            { id: 14, q: "铆接强度的检验频次", a: "1套/每年", level: 5 ,checkkey:14},
            { id: 15, q: "单铆时的上件定位精度要求", a: "铆接孔对正", level: 3 ,checkkey:15},
            { id: 16, q: "￠1.2焊丝人工焊焊接电压", a: "24±2 V", level: 2 ,checkkey:16},
            { id: 17, q: "￠1.2焊丝人工焊焊接电流", a: "240±40 A", level: 2 ,checkkey:17},
            { id: 18, q: "￠1.2焊丝人工焊CO2气流量要求", a: "18+2-3 L/min", level: 2 ,checkkey:18},
            { id: 19, q: "￠1.0焊丝人工焊焊接电压", a: "21±3 V", level: 3 ,checkkey:19},
            { id: 20, q: "￠1.0焊丝人工焊焊接电流", a: "190±30 A", level: 3 ,checkkey:20},
            { id: 21, q: "车架前端外侧尺寸误差要求", a: "±2mm", level: 1 ,checkkey:21},
            { id: 22, q: "焊缝外观质量", a: "无未熔合未焊透烧穿裂纹飞溅", level: 5 ,checkkey:22},
            { id: 23, q: "打码气压要求", a: "0.4~0.6MPa", level: 5 ,checkkey:23},
            { id: 24, q: "打码机字体设置要求", a: "GOLD=.SHP", level: 1 ,checkkey:24},
            { id: 25, q: "打码机字高设置要求", a: "10mm", level: 1 ,checkkey:25},
            { id: 26, q: "打码机字宽设置要求", a: "7mm", level: 1 ,checkkey:26},
            { id: 27, q: "保险杠背板左右支架安装孔间距误差要求", a: "±1mm", level: 2 ,checkkey:27},
            { id: 28, q: "前悬前支架同轴度要求", a: "≤φ2mm", level: 1 ,checkkey:28},
            { id: 29, q: "非帅X车架焊丝规格要求", a: "￠1.2mm", level: 1 ,checkkey:29},
            { id: 30, q: "帅X车架焊丝规格要求", a: "￠1.0mm", level: 1 ,checkkey:30},
            { id: 31, q: "机器人焊接电流要求", a: "145±45A", level: 5 ,checkkey:31},
            { id: 32, q: "非帅X车架前悬对角线误差(C-D线)", a: "≤3mm", level: 3 ,checkkey:2},
            { id: 33, q: "机器人焊接电压要求", a: "21±3V", level: 5 ,checkkey:19},
            { id: 34, q: "非帅X车架总对角线误差要求", a: "≤6mm", level: 3 ,checkkey:34},
            { id: 35, q: "两侧纵梁与车架中心线对称偏差", a: "≤2mm", level: 4 ,checkkey:35},
            { id: 36, q: "装配、铆接后的车架总成，其左右纵梁上表面在同一平面内误差", a: "≤3mm", level: 5 ,checkkey:2},
            { id: 37, q: "左右纵梁与水平面的垂直度误差", a: "≤3mm", level: 5 ,checkkey:2},
            { id: 38, q: "车架横梁与纵梁垂直度", a: "≤1.2mm", level: 5 ,checkkey:38},
            { id: 39, q: "前悬前对称的板簧吊距（宽度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 40, q: "机器人焊接速度要求", a: "35-50cm/min", level: 5 ,checkkey:40},
            { id: 41, q: "纵梁张口尺寸公差要求", a: "-1~+3mm", level: 1 ,checkkey:41},
            { id: 42, q: "四个零是指", a: "零划痕、零锈蚀、零铁屑、零飞溅", level: 1 ,checkkey:42},
            { id: 43, q: "车架打码字头朝向何方", a: "车架前方", level: 2 ,checkkey:43},
            { id: 44, q: "3米卷尺测量精度", a: "1mm", level: 2 ,checkkey:44},
            { id: 45, q: "纵梁VIN码区外观质量", a: "纵梁VIN码区表面平整无划伤", level: 5 ,checkkey:45},
            { id: 46, q: "轻卡以及底盘车架总成识别码打码位置", a: "打在后横梁下翼面平整易于辨识位置，字头朝前", level: 4 ,checkkey:46},
            { id: 47, q: "帅X车架总成识别码打码位置", a: "打在右纵梁后段，内侧，距离纵梁后端800-1200mm,字头朝上", level: 5 ,checkkey:47},
            { id: 48, q: "车架外观质量要求", a: "车架总成不得有严重油污、磕碰、划痕、裂纹、锈蚀，不得留有补孔余屑及毛刺", level: 5 ,checkkey:48},
            { id: 49, q: "尺寸检验要求每批检几件", a: "5件", level: 3 ,checkkey:49},
            { id: 50, q: "三坐标精测要求每周几件", a: "2件", level: 4 ,checkkey:50},
            { id: 51, q: "驾驶室后支撑两大孔中心距误差要求", a: "±2mm", level: 3 ,checkkey:21},
            { id: 52, q: "帅X车架前悬对角线误差(C-D线)", a: "≤2mm", level: 4 ,checkkey:35},
            { id: 53, q: "焊接前需在待焊接区域喷洒什么", a: "防飞溅液", level: 1 ,checkkey:53},
            { id: 54, q: "帅X车架最前端横梁与最后端横梁的四个外端点对角线误差", a: "≤3mm", level: 4 ,checkkey:2},
            { id: 55, q: "车架码放高度要求", a: "≤4台", level: 2 ,checkkey:55},
            { id: 56, q: "电动平板车上车架流转数量", a: "≤8台", level: 2 ,checkkey:56},
            { id: 57, q: "清洗线纵梁上件定位精度要求", a: "纵梁与工位器具靠齐，磁力吊与纵梁对正", level: 4 ,checkkey:57},
            { id: 58, q: "清洗线纵梁抓件数量要求", a: "≤5件", level: 5 ,checkkey:58},
            { id: 59, q: "清洗线纵梁排布要求", a: "平行排布", level: 5 ,checkkey:59},
            { id: 60, q: "脱脂剂型号", a: "Ecc-10", level: 2 ,checkkey:60},
            { id: 61, q: "脱脂槽液游离碱度", a: "11（-2，+4）pt", level: 1 ,checkkey:61},
            { id: 62, q: "脱脂槽液温度", a: "50±10 ℃", level: 1 ,checkkey:62},
            { id: 63, q: "脱脂槽倒槽频次", a: "槽体清理干净（≤25000件）", level: 2 ,checkkey:63},
            { id: 64, q: "纵梁脱脂表面状态", a: "无油污及铁屑", level: 3 ,checkkey:64},
            { id: 65, q: "纵梁吹水表面状态", a: "无明显脱脂液", level: 3 ,checkkey:65},
            { id: 66, q: "防锈剂型号", a: "ECF", level: 2 ,checkkey:66},
            { id: 67, q: "防锈剂加料频次", a: "25 Kg/班(≤1000件)", level: 2 ,checkkey:67},
            { id: 68, q: "防锈槽液温度", a: "40±10 ℃", level: 1 ,checkkey:68},
            { id: 69, q: "防锈槽倒槽频次", a: "槽体清理干净（≤5000件）", level: 2 ,checkkey:69},
            { id: 70, q: "纵梁烘干后表面状态", a: "表面干燥、无锈蚀", level: 3 ,checkkey:70},
            { id: 71, q: "风口温度（烘干温度）", a: "110±10℃", level: 2 ,checkkey:71},
            { id: 72, q: "纵梁下件纵梁排布磁力吊就位", a: "平行排布，无严重歪斜磁力吊与纵梁对正", level: 5 ,checkkey:72},
            { id: 73, q: "清洗线下件码放要求", a: "每框≤40件", level: 2 ,checkkey:73},
            { id: 74, q: "下件标识要求", a: "每件纵梁用记号笔标识纵梁结构号与生产日期", level: 5 ,checkkey:74},
            { id: 75, q: "转运质量要求", a: "正确取件,安全转移", level: 5 ,checkkey:75},
            { id: 76, q: "焊接强度要求", a: "≥306Mpa", level: 5 ,checkkey:76},
            { id: 77, q: "单铆的铆接压力下限", a: "12MPa", level: 1 ,checkkey:77},
            { id: 78, q: "单铆的铆接压力上限", a: "18MPa", level: 1 ,checkkey:78},
            { id: 79, q: "拼铆的铆接压力下限", a: "18MPa", level: 1 ,checkkey:78},
            { id: 80, q: "拼铆的铆接压力上限", a: "24MPa", level: 1 ,checkkey:80},
            { id: 81, q: "￠1.0焊丝人工焊CO2气流量要求", a: "18+2-3 L/min", level: 2 ,checkkey:18},
            { id: 82, q: "焊接强度的检验频次", a: "1套/每年", level: 5 ,checkkey:14},
            { id: 83, q: "车架中间外侧尺寸误差要求", a: "±2mm", level: 1 ,checkkey:21},
            { id: 84, q: "车架后端外侧尺寸误差要求", a: "±2mm", level: 1 ,checkkey:21},
            { id: 85, q: "前悬后支架同轴度要求", a: "≤φ2mm", level: 1 ,checkkey:28},
            { id: 86, q: "后悬前支架同轴度要求", a: "≤φ2mm", level: 1 ,checkkey:28},
            { id: 87, q: "后悬后支架同轴度要求", a: "≤φ2mm", level: 1 ,checkkey:28},
            { id: 88, q: "非帅X车架后悬对角线误差(E-F线)", a: "≤3mm", level: 3 ,checkkey:2},
            { id: 89, q: "非帅X车架最前端横梁与最后端横梁的四个外端点对角线误差", a: "≤6mm", level: 3 ,checkkey:34},
            { id: 90, q: "前悬后对称的板簧吊距（宽度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 91, q: "后悬前对称的板簧吊距（宽度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 92, q: "后悬后对称的板簧吊距（宽度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 93, q: "前悬左右板簧固定支架与左右吊耳支架（长度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 94, q: "后悬左右板簧固定支架与左右吊耳支架（长度方向)", a: "±2mm", level: 1 ,checkkey:21},
            { id: 95, q: "帅X车架后悬对角线误差(E-F线)", a: "≤2mm", level: 4 ,checkkey:35},
            { id: 96, q: "帅X车架总对角线误差要求", a: "≤3mm", level: 4 ,checkkey:2},
        ];

        // 游戏状态管理
        let gameState = {
            currentLevel: 1,
            score: 0,
            selectedCard: null,
            isGameOver: false,
            activeCards: []
        };

        // 初始化游戏
        function initGame(level) {
            // 重置状态
            gameState = {
                currentLevel: level,
                score: 0,
                selectedCard: null,
                isGameOver: false,
                activeCards: []
            };

            // 清除旧游戏板
            const newBoard = document.createElement('div');
            newBoard.id = 'gameBoard';
            gameBoard.replaceWith(newBoard);
            gameBoard = newBoard;

            // 获取题目
            const questions = getQuestionsByLevel(level);
            const cardPairs = generateCardPairs(questions);
            
            // 渲染卡片
            renderCards(cardPairs);
            
            // 更新界面
            document.getElementById('score').textContent = `得分: 0`;
            document.getElementById('gameOver').style.display = 'none';
        }

        // 获取对应难度题目
        function getQuestionsByLevel(level) {
            const levelRequirements = [6, 10, 15, 18, 21];
            const requiredCount = levelRequirements[level - 1] || 6;
            
            return shuffleArray(
                questionBank.filter(q => q.level <= level)
            ).slice(0, requiredCount);
        }

        // 生成卡片对
        function generateCardPairs(questions) {
            return shuffleArray(
                questions.flatMap(q => [
                    { ...q, type: 'q', content: q.q },
                    { ...q, type: 'a', content: q.a }
                ])
            );
        }

        // 渲染卡片
        function renderCards(cards) {
            // 计算布局
            const columns = Math.ceil(Math.sqrt(cards.length));
            gameBoard.style.gridTemplateColumns = `repeat(${Math.min(6, columns)}, 1fr)`;

            // 生成卡片
            gameBoard.innerHTML = cards.map(card => `
                <div class="card" 
                     data-id="${card.id}"
                     data-type="${card.type}"
                     data-level="${card.level}"
                     data-checkkey="${card.checkkey}">
                    ${card.content}
                </div>
            `).join('');

            // 绑定事件
            gameBoard.addEventListener('click', handleCardClick);
        }

        // 处理卡片点击
        function handleCardClick(event) {
            if (gameState.isGameOver) return;

            const card = event.target.closest('.card');
            if (!card || card.classList.contains('matched')) return;

            // 防止重复选择
            if (card === gameState.selectedCard) return;

            card.classList.add('selected');
            gameState.activeCards.push(card);

            if (!gameState.selectedCard) {
                gameState.selectedCard = card;
            } else {
                const isMatch = checkMatch(gameState.selectedCard, card);
                isMatch ? handleMatchSuccess() : handleMatchFailure();
                gameState.selectedCard = null;
            }
        }

        // 验证匹配
        function checkMatch(cardA, cardB) {
            return cardA.dataset.checkkey === cardB.dataset.checkkey &&
                   cardA.dataset.type !== cardB.dataset.type;
        }

        // 处理成功匹配
        function handleMatchSuccess() {
            gameState.score += 100;
            document.getElementById('score').textContent = `得分: ${gameState.score}`;

            gameState.activeCards.forEach(card => {
                card.classList.add('matched');
                card.classList.remove('selected');
            });

            checkGameComplete();
            gameState.activeCards = [];
        }

        // 处理匹配失败
        function handleMatchFailure() {
            gameState.isGameOver = true;
            
            // 错误反馈动画
            gameState.activeCards.forEach(card => {
                card.style.backgroundColor = '#ffeef0';
                card.style.borderColor = '#ff4444';
                card.animate([
                    { transform: 'translateX(0)' },
                    { transform: 'translateX(-10px)' },
                    { transform: 'translateX(10px)' },
                    { transform: 'translateX(0)' }
                ], { duration: 400 });
            });

            setTimeout(() => {
                gameState.activeCards.forEach(card => {
                    card.classList.remove('selected');
                    card.style.backgroundColor = '';
                    card.style.borderColor = '';
                });
                endGame();
            }, 800);
        }

        // 检查游戏完成
        function checkGameComplete() {
            const remaining = document.querySelectorAll('.card:not(.matched)');
            if (remaining.length === 0) {
                setTimeout(() => {
                    alert(`🎉 通关成功！\n最终得分：${gameState.score}`);
                }, 300);
            }
        }

        // 结束游戏
        function endGame() {
            gameState.isGameOver = true;
            document.getElementById('finalScore').textContent = gameState.score;
            document.getElementById('gameOver').style.display = 'flex';
            
            // 禁用所有卡片
            document.querySelectorAll('.card').forEach(card => {
                card.style.pointerEvents = 'none';
            });
        }

        // 重新开始
        function restartGame() {
            initGame(gameState.currentLevel);
        }

        // 工具函数
        function shuffleArray(array) {
            for (let i = array.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [array[i], array[j]] = [array[j], array[i]];
            }
            return array;
        }

        // 难度切换
        document.querySelectorAll('.difficulty-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                document.querySelector('.active')?.classList.remove('active');
                this.classList.add('active');
                initGame(parseInt(this.dataset.level));
            });
        });

        // 初始加载
        initGame(1);
    </script>
</body>
</html>